<template>
	<view class="rate">
		<view class="rate-star">
			<view class="rate-star-tit uni-h5">对服务商进行评价</view>
			<view class="rate-star-action flex-center">
				<text>服务态度</text>
				<uni-rate max="5"
					:value="attitudeStarNumber"
					size="26"
					margin="5"
					color="#ccc"
					active-color="#ffbb2a"
					@change="changeAttitudeStarNumber">
				</uni-rate>
				<text class="rate-star-action-text">{{attitudeStarText}}</text>
			</view>
			<view class="rate-star-action flex-center">
				<text>服务技能</text>
				<uni-rate max="5"
					:value="skillStarNumber"
					size="26"
					margin="5"
					color="#ccc"
					active-color="#ffbb2a"
					@change="changeSkillStarNumber">
				</uni-rate>
				<text class="rate-star-action-text">{{skillStarText}}</text>
			</view>
		</view>

		<view class="rate-detail">
			<view class="rate-detail-tit uni-h5">评论描述</view>
			<textarea class="rate-detail-area" placeholder="请输入您对该服务的看法" value="" />
		</view>
	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate.vue"
	export default {
		components: {
			uniRate
		},
		data() {
			return {
				attitudeStarNumber: 5,
				attitudeStarText: '非常满意',
				skillStarNumber: 5,
				skillStarText: '非常满意',
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 服务态度
			 * @param {Object} num
			 */
			changeAttitudeStarNumber(num) {
				this.attitudeStarNumber = num.value
				this.attitudeStarText = num.value === 5 ? '非常满意' : num.value === 4 ? '比较满意' : num.value === 3 ? '一般' : num.value === 2 ? '不满意' : '非常不满意'
			},
			/**
			 * 服务态度
			 * @param {Object} num
			 */
			changeSkillStarNumber(num) {
				this.skillStarNumber = num.value
				this.skillStarText = num.value === 5 ? '非常满意' : num.value === 4 ? '比较满意' : num.value === 3 ? '一般' : num.value === 2 ? '不满意' : '非常不满意'
			},
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
		}
	}
</script>

<style lang="scss">
	.rate{
		.rate-star{
			border-top: 20rpx solid $uni-bg-color-grey;
			background: $uni-bg-color;
			padding: 30rpx 0 30rpx 45rpx;
			.rate-star-tit{
				padding: 10rpx 0;
				margin-bottom: 50rpx;
			}
			.rate-star-action{
				margin: 20rpx 0;
				font-size: $uni-font-size-sm2;
				&-text{
					color: #ff892a;
					margin-left: 20rpx;
				}
			}
		}
		.rate-detail{
			border-top: 20rpx solid $uni-bg-color-grey;
			background: $uni-bg-color;
			.rate-detail-tit{
				padding: 10rpx 0 10rpx 45rpx;
				margin-bottom: 20rpx;
			}
			.rate-detail-area{
				width: 650rpx;
				margin: 20rpx auto;
			}
		}
	}
</style>
